<template>
    <div>
      <BasicTable @register="registerTable" @resize-column="handleResizeColumn">
        <template #toolbar>
          <a-button
            @click="handleToChartList"
          > 
            查看电桩图形分析
          </a-button>
        </template>
        <template #action="{ record }">
          <TableAction
            :actions="[
              {
                label: '离线',
                popConfirm: {
                  title: '是否确认离线',
                  confirm: handleOffline.bind(null, record),
                },
              },
              {
                label: '充电终端管理',
                onClick: handleTerModal.bind(null, record),
              },
            ]"
          />
        </template>
      </BasicTable>
      <EditModal @register="registerModal" @success="handleSuccess" />
      <TerListModal @register="registerTerModal" />
      <CountChartModal @register="registerChartModal"/>
    </div>
  </template>
  <script lang="ts">
  import { defineComponent } from 'vue';
import { defHttp } from '@/utils/http/axios';
import { Button } from 'ant-design-vue';
  export default defineComponent({
    name: 'StationList',
  });
  </script>
  <script lang="ts" setup>
  import { onMounted, ref, h } from 'vue';
  import { BasicTable, useTable, TableAction } from '@/components/Table';
  import { useModal } from '@/components/Modal';
  import EditModal from './EditModal.vue';
  import TerListModal from './terListModal.vue';
  import { columns, searchFormSchema } from './data';
  import { useMessage } from '@/hooks/web/useMessage';
  import CountChartModal from './components/countChartModal.vue'
  import dayjs from 'dayjs';
  const delLoading = ref(false);
  const { createMessage } = useMessage();
  const [registerModal, { openModal }] = useModal();
  const [registerTerModal, { openModal: openTerModal }] = useModal();
  const [registerTable, { reload, getSelectRows, getSelectRowKeys }] =
    useTable({
      api: '/admin/station/list',
      columns: [
        {
          title: 'ID',
          dataIndex: 'id',
          width: 80,
          fixed: 'left',
        },
        {
          title: '电站名称',
          dataIndex: 'name',
          width: 250,
        },
        {
          title: '经营时间',
          dataIndex: 'operate_time',
          width: 150,
          customRender: ({ record }) => {
            const { serviceStartTime, serviceEndTime } = record;
            return `${serviceStartTime}到${serviceEndTime}`
          }
        },
        {
          title: '所属组织架构',
          dataIndex: 'organization',
          width: 150,
          customRender: ({ record }) => {
            return '智电云智能充电'
          }
        },
        {
          title: '收费标准',
          dataIndex: 'chargeStandardName',
          width: 400,
        },
        {
          title: '电桩运营商',
          dataIndex: 'operatorMemo',
          width: 100,
        },
        {
          title: '是否列出',
          dataIndex: 'isOpen',
          width: 80,
          customRender: ({ record }) => {
            return record.isOpen == 1 ? '是' : '否'
          }
        },
        {
          title: '创建时间',
          dataIndex: 'createDate',
          width: 200,
          customRender: ({ record }) => {
            return dayjs(record.createDate).format('YYYY-MM-DD HH:mm:ss')
          }
        },
        {
          title: '运营管理',
          dataIndex: 'operation',
          width: 70,
          fixed: 'right',
          customRender: ({ record }) => {
            return h(Button, {
              type: 'link',
              onClick: () => {
                handleEdit(record);
              },
            }, '编辑')
          }
        }
      ],
      useSearchForm: true,
      formConfig: {
        schemas: [
          {
            component: 'Input',
            label: '电站名称',
            field: 'name',
          },
          // 源前端代码没有用
          // {
          //   component: 'Select',
          //   label: '组织架构',
          //   field: '',
          //   componentProps: {
          //       format: 'YYYY-MM-DD HH:mm:ss',
          //       valueFormat: 'YYYY-MM-DD',
          //   },
          // },
        ]
      },
      showIndexColumn: true,
      indexColumnProps: {
        fixed: 'left',
      },
      pagination: true,
      bordered: true,
      actionColumn: {
        width: 150,
        title: '操作',
        dataIndex: 'action',
        slots: { customRender: 'action' },
        fixed: 'right',
      },
      rowKey: 'id',
      rowSelection: {
        type: 'checkbox',
      },
    });
  onMounted(() => {
  });
  
  function handleCreate() {
    openModal(true, {
        isUpdate: false
    });
  }
  function handleEdit(record: Recordable) {
    openModal(true, {
        record,
        isUpdate: true,
    });
  }
  function handleTerModal(record: Recordable) {
    openTerModal(true, {
        id: record.id,
    });
  }
  async function handleDelete() {
    delLoading.value = true;
    try {
        const res = await defHttp.post({ url: `/admin/ad/delete`, data: getSelectRowKeys() });
        createMessage.success(res);
        reload();
    } finally {
        delLoading.value = false;
    }
  }
  async function handleOffline(record: Recordable) {
    const { id } = record;
    const res = await defHttp.post({ url: `/admin/station/offline/${id}` });
    createMessage.success(res);
    reload();
  }
  const [registerChartModal, { openModal: openChartModal }] = useModal();

  function handleToChartList () {
    openChartModal(true, {})
  }
  function handleSuccess() {
    reload();
  }
  </script>
  